<script setup>
import { defineAsyncComponent, onErrorCaptured, onMounted } from "vue";
import { useThemeStore } from "./stores/theme";

// 异步加载ScaleBox组件，并添加错误处理
const ScaleBox = defineAsyncComponent(() =>
  import("vue3-scale-box").catch(() => {
    console.error("Failed to load vue3-scale-box");
    return () => null;
  })
);

const themeStore = useThemeStore();

// 初始化主题
onMounted(() => {
  themeStore.initTheme();
});

// 全局错误捕获
onErrorCaptured((err) => {
  console.error("全局错误捕获:", err);
  return true;
});
</script>

<template>
  <div class="app-container">
    <div class="theme-toggle" @click="themeStore.toggleTheme()">
      <i :class="themeStore.isDark ? 'icon-moon' : 'icon-sun'"></i>
    </div>
    <ScaleBox :width="1920" :height="1080">
      <RouterView />
    </ScaleBox>
  </div>
</template>

<style lang="scss">
@import "./assets/styles/theme.scss";

.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  &:hover {
    background-color: var(--border-color);
  }

  i {
    font-size: 20px;
    color: var(--text-primary);
  }
}

// 主题图标样式
.icon-sun::before {
  content: "☀️";
}

.icon-moon::before {
  content: "🌙";
}
</style>
